<template>
	<view class="content">
		<view class="topCon">
			<view class="title">欢迎登录</view>
			<view class="con">
				<view class="tablist">
					<view class="tabli" :class="tabActive == index ? 'tabActive':''" v-for="(item,index) in tablist"
						@click="tabChange(index)">{{ item.text }}</view>
				</view>
				<view class="li">
					<view>手机号</view>
					<input type="number" v-model="tel" placeholder="请输入手机号" />
					<!-- <uni-easyinput v-model="value" placeholder="请输入内容"></uni-easyinput> -->
				</view>
				<view class="li" v-if="tabActive == 0">
					<view>密码</view>
					<input type="password" v-model="password" placeholder="请输入密码" />
				</view>
				<view class="li" v-if="tabActive == 1">
					<view>验证码</view>
					<input type="text" v-model="code" placeholder="请输入验证码" />
					<view class="btn-phone" v-if="showButton" @click="sendCode">获取验证码</view>
					<view class="btn-phone" style="color: #999;" v-if="!showButton">{{countTime}}S后重新获取</view>
				</view>
			</view>
			<view class="xieyi">
				<checkbox class="check" :checked="checked" @change="onCheckAllChange" label=""></checkbox>
				点击阅读并同意<span>《服务开展协议》</span>和<span>《隐私协议》</span>
			</view>
			<button class="btn login" @click="startLogin">登录</button>
			<button class="btn register" @click="register">注册</button>
		</view>
	</view>
</template>

<script>
	import {
		sendmes,
		login
	} from "@/utils/api.js";
	export default {
		data() {
			return {
				tel:'',
				password:'',
				code:'',
				value: 'Hello',
				showButton: true,
				countTime: 60,
				timer: null,
				checked: true,
				tabActive: 0,
				tablist: [{
						type: 0,
						text: '密码登录'
					},
					{
						type: 0,
						text: '验证码登录'
					}
				],
			}
		},
		onLoad() {

		},
		methods: {
			tabChange(index) {
				this.tabActive = index
			},
			register() {
				uni.navigateTo({
					url: "/pages/register/index"
				})
			},
			onCheckAllChange(e) {
				console.log(e)
			},
			clearIcon: function() {
				this.inputClearValue = '';
				this.showClearIcon = false;
			},
			async sendCode() {
				let that = this
				let data = {
					tel: that.tel,
					ctypes: 0
				}
				let res = await sendmes(data);

				if (res.code == 0) {
					that.countDown()
					uni.showToast({
						title: '发送成功',
						icon: 'none'
					})
				} else {
					uni.showToast({
						title: res.msg,
						icon: 'none'
					})
				}

				that.countDown()
			},

			countDown() {
				let that = this
				clearInterval(that.timer)
				that.timer = null
				that.timer = setInterval(() => {
					let time = that.countTime
					time = time - 1
					that.countTime = time
					if (time == 0) {
						that.showButton = true
						that.countTime = 60
						clearInterval(that.timer)
						that.timer = null
					} else {
						that.showButton = false
					}
				}, 1000)
			},
			async startLogin(){
				let that = this
				let data = ''
				if(!that.tel){
					uni.showToast({
						title:'请输入手机号',
						icon: 'none'
					})
					return
				}
				if(that.tabActive == 0){
					if(!that.password){
						uni.showToast({
							title:'请输入密码',
							icon: 'none'
						})
						return
					}
				   data = {
				   	tel: that.tel,
				   	password: that.password
				   }	
				}else{
					if(!that.code){
						uni.showToast({
							title:'请输入验证码',
							icon: 'none'
						})
						return
					}
					data = {
						tel: that.tel,
						code: that.code
					}	
				}
				
				let res = await login (data);
				
				if (res.code == 0) {
					uni.setStorageSync('Authorization',res.Authorization)
					uni.setStorageSync('userInfo',res.results)
					uni.reLaunch({
						url:"/pages/index/index"
					})
				} else {
					uni.showToast({
						title: res.msg,
						icon: 'none'
					})
				}
			},
		}
	}
</script>

<style>
	page {
		height: 100%;
	}

	.content {
		height: 100%;

	}

	.tablist {
		width: 80%;
		height: 70rpx;
		line-height: 70rpx;
		margin: auto;
		display: flex;
		border-bottom: 1rpx solid #fff;
		margin-bottom: 50rpx;
	}

	.tablist .tabli {
		width: 50%;
		text-align: center;
	}

	.tabActive {
		border-bottom: 4rpx solid #267DAC;
		color: #267DAC;
		font-size: 33rpx;
	}

	.topCon {
		height: 50%;
		background-image: linear-gradient(to bottom, #267DAC, #C8EAFD, #fff);

	}

	.topCon .title {
		width: 80%;
		margin: auto;
		font-size: 26px;
		font-weight: bold;
		padding-top: 200rpx;
	}

	.topCon .con {
		width: 80%;
		margin: auto;
		margin-top: 100rpx;
		font-size: 13px;
	}

	.topCon .con .li {
		margin-top: 30rpx;
		position: relative;
	}

	.topCon .con input {
		height: 80rpx;
		line-height: 80rpx;
		margin-top: 0rpx;
		border-bottom: 1px solid #ccc;
		font-size: 13px;
	}

	.topCon .con .li .btn-phone {
		position: absolute;
		right: 0;
		bottom: 26rpx;
		color: #008BDE;

	}

	.xieyi {
		width: 80%;
		margin: auto;
		font-size: 24rpx;
		margin-top: 20rpx;

	}

	.xieyi checkbox {
		transform: scale(0.7)
	}

	.xieyi span {
		color: #008BDE;
	}

	.btn {
		width: 80%;
		height: 80rpx;
		line-height: 80rpx;
		border-radius: 80rpx;
		color: white;
		margin: auto;
		background-color: #008BDE;
		margin-top: 50rpx;
		font-size: 26rpx;
	}

	.login {
		margin-top: 100rpx;
	}

	.register {
		background-color: #fff;
		color: #008BDE;
		border: 1rpx solid #008BDE;
	}
</style>